<template>
    <div class="container">
        <!-- box音乐播放器父容器 -->
        <div class="box">
            <!-- 左侧放的是图片和歌曲名字 -->
            <div class="left">
                <div id="face" class="paused">
                    <img src="http://p1.music.126.net/Fz44CwSnXepKX4ItIKpx0Q==/109951163312892067.jpg?param=130y130"
                        alt="我变了 我没变">
                </div>
                <div style="margin-left: 10px;font-family: '微软雅黑';">我变了 我没变 - 张碧晨</div>
            </div>
            <!-- 右侧放的是播放按钮和图标 -->
            <div class="right">
                <div class="play_btn" @click="playStatus">
                    <!--播放和暂停按钮-->
                    <van-icon name="play-circle-o" size="28" v-if="!player"></van-icon>
                    <van-icon name="pause-circle-o" size="28" v-else></van-icon>
                </div>
                <div class="list_icon" style="margin-left: 5px;">
                    <van-icon name="bars" size="28"></van-icon>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
    import {ref} from 'vue';
    //控制按钮播放和暂停的变量
    const player = ref(false);
    const toggle = ref(false);
    //声明一个音频对象
    let audio = ref(null);
    const audioUrl = 'https://cdn3.easylink.cc/32a23619-ede0-49b3-9f38-47216f26b555_%E6%88%91%E5%8F%98%E4%BA%86%E6%88%91%E6%B2%A1%E5%8F%98.mp3?e=1751799939&token=J_WyMIdhZtwb0E0QHWRqEfQrd5lVSWLffl9QxaxP:Y1gaLmV8UiTqLXnFME3c4uihnlg=';
    const playStatus = ()=> {
        player.value = !player.value;
        //首次点击初始化音频对象
        if(!audio.value){
            audio.value = new Audio(audioUrl);
            //监听音频的播放和结束
            audio.value.addEventListener('ended', () => {
                player.value = false;   //播放结束后重置状态
            });
        }
        if (player.value) {
            audio.value.play();
        } else {
            audio.value.pause();
        }
        toggleplay();
    }
    //同步按钮和图片状态
    const toggleplay = () => {
        toggle.value = ! toggle.value;
        if (toggle.value) {
            document.getElementById('face').classList.remove('paused');
        } else {
            document.getElementById('face').classList.add('paused');
        }
    }
</script>
<style lang="less" scoped>

    //定义图片旋转动画
    @keyframes rotate {
        from{
            transform: rotate(0deg);
        }to{
            transform: rotate(360deg);
        }
    }

    .container {
        width: 100%;
        height: 60px;
        background-color: #fff;
        border-top: 1px solid #ccc;
        // 固定在下方 固定定位
        position: fixed;
        bottom: 0;
        padding: 10px;
        box-sizing: border-box;

        .box {
            display: flex;
            justify-content: space-between;
            .left{
                display: flex;
                align-items: center;
                #face{
                    animation: rotate 5s linear infinite;
                }
                #face.paused{
                    //设置动画为暂停状态
                    animation-play-state: paused;
                }
                #face>img{
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                }
            }
            .right{
                display: flex;
                align-items: center;
            }
        }
    }
</style>